<%--
  Created by IntelliJ IDEA.
  User: JmKing
  Date: 2025/7/26
  Time: 12:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <title>校园失物管理系统 - 首页</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="哈尔滨师范大学" />
    <meta name="description" content="校园失物招领系统" />

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="<%=path%>/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=path%>/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <style>
        /* 自定义样式 */
        :root {
            --primary-color: #1E9FFF;
            --secondary-color: #FF5722;
            --dark-color: #393D49;
            --light-color: #f8f9fa;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f2f2f2;
            color: #333;
        }

        /* 轮播图样式 */
        .banner-container {
            margin: 15px auto;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        /* 功能卡片样式 */
        .feature-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .feature-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 快速入口样式 */
        .quick-access {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .quick-btn {
            display: block;
            text-align: center;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 6px;
            background: var(--primary-color);
            color: white;
            transition: all 0.3s;
        }

        .quick-btn:hover {
            background: #0d8bf2;
            color: white;
            text-decoration: none;
        }

        /* 公告样式 */
        .notice-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .notice-item:last-child {
            border-bottom: none;
        }

        .notice-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .notice-time {
            color: #999;
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .feature-card {
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>


<!-- 主要内容区域 -->
<div class="layui-fluid" style="padding: 15px;">
    <div class="layui-row layui-col-space15">
        <!-- 轮播图 -->
        <div class="layui-col-md12">
            <div class="banner-container">
                <div class="layui-carousel" id="banner">
                    <div carousel-item>
                        <div><img src="<%=path%>/static/images/banner1.jpg" style="width:100%; height:400px; object-fit: cover;"></div>
                        <div><img src="<%=path%>/static/images/banner2.jpg" style="width:100%; height:400px; object-fit: cover;"></div>
                        <div><img src="<%=path%>/static/images/banner4.jpg" style="width:100%; height:400px; object-fit: cover;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速入口 -->
        <div class="layui-col-md4">
            <div class="quick-access">
                <h2 style="margin-bottom: 20px; color: var(--dark-color);">快速入口</h2>
                <a href="<%=path%>/client/swdt" class="quick-btn">
                    <i class="bi bi-search"></i> 失物招领
                </a>
                <a href="<%=path%>/tiezi/toAdd" class="quick-btn" style="background: var(--secondary-color);">
                    <i class="bi bi-plus-circle"></i> 发布失物信息
                </a>
                <a href="<%=path%>/client/tiezi" class="quick-btn" style="background: #009688;">
                    <i class="bi bi-chat-left-text"></i> 校园论坛
                </a>
                <a href="<%=path%>/client/board" class="quick-btn" style="background: #FFB800;">
                    <i class="bi bi-megaphone"></i> 查看公告
                </a>
            </div>

            <!-- 数据统计 -->
            <div class="feature-card">
                <div class="layui-card">
                    <div class="layui-card-header">系统数据</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-xs6">
                                <div style="text-align: center; padding: 15px; background: #f8f8f8; border-radius: 6px;">
                                    <div style="font-size: 1.8rem; color: var(--primary-color);">256</div>
                                    <div>今日访问</div>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div style="text-align: center; padding: 15px; background: #f8f8f8; border-radius: 6px;">
                                    <div style="font-size: 1.8rem; color: var(--secondary-color);">128</div>
                                    <div>失物登记</div>
                                </div>
                            </div>
                            <div class="layui-col-xs6" style="margin-top: 10px;">
                                <div style="text-align: center; padding: 15px; background: #f8f8f8; border-radius: 6px;">
                                    <div style="font-size: 1.8rem; color: #009688;">64</div>
                                    <div>成功认领</div>
                                </div>
                            </div>
                            <div class="layui-col-xs6" style="margin-top: 10px;">
                                <div style="text-align: center; padding: 15px; background: #f8f8f8; border-radius: 6px;">
                                    <div style="font-size: 1.8rem; color: #FFB800;">32</div>
                                    <div>今日发帖</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要功能 -->
        <div class="layui-col-md8">
            <!-- 系统功能 -->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-journal-check"></i>
                        </div>
                        <div class="feature-title">失物招领</div>
                        <p>发布和查找校园内丢失的物品信息，帮助失物尽快回到主人手中。</p>
                        <a href="<%=path%>/client/swdt" class="layui-btn layui-btn-primary" style="margin-top: 15px;">进入</a>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-chat-square-text"></i>
                        </div>
                        <div class="feature-title">校园论坛</div>
                        <p>校园生活交流平台，分享学习经验、生活趣事和校园资讯。</p>
                        <a href="<%=path%>/client/tiezi" class="layui-btn layui-btn-primary" style="margin-top: 15px;">进入</a>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-megaphone"></i>
                        </div>
                        <div class="feature-title">公告通知</div>
                        <p>查看学校最新公告和通知，了解校园动态和重要信息。</p>
                        <a href="<%=path%>/client/board" class="layui-btn layui-btn-primary" style="margin-top: 15px;">进入</a>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-person-circle"></i>
                        </div>
                        <div class="feature-title">个人中心</div>
                        <p>管理您的个人信息、发布的失物信息和论坛帖子。</p>
                        <a href="<%=path%>/user/myinfo" class="layui-btn layui-btn-primary" style="margin-top: 15px;">进入</a>
                    </div>
                </div>
            </div>

            <!-- 最新公告 -->
            <div class="feature-card">
                <h2 style="margin-bottom: 20px; color: var(--dark-color);">最新公告</h2>
                <div class="notice-item">
                    <div class="notice-title">关于校园失物招领系统升级的通知</div>
                    <div class="notice-time">2025-05-15</div>
                </div>
                <div class="notice-item">
                    <div class="notice-title">2025年春季学期失物招领工作安排</div>
                    <div class="notice-time">2025-03-10</div>
                </div>
                <div class="notice-item">
                    <div class="notice-title">校园失物招领系统使用指南</div>
                    <div class="notice-time">2025-02-28</div>
                </div>
                <div style="text-align: right; margin-top: 15px;">
                    <a href="<%=path%>/client/board" class="layui-btn layui-btn-sm">更多公告</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入JavaScript文件 -->
<script src="<%=path%>/static/layuiadmin/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script>
    layui.use(['carousel', 'element'], function(){
        var carousel = layui.carousel;
        var element = layui.element;

        // 轮播图初始化
        carousel.render({
            elem: '#banner',
            width: '100%',
            height: '400px',
            arrow: 'always',
            anim: 'fade',
            interval: 3000
        });
    });
</script>
</body>
</html>